<script setup>
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useObject, q, m } from "#imports";
import { listRoles } from "@hostlink/light";
const quasar = useQuasar();
const router = useRouter();
const { data: obj } = await useObject({
  user_id: true,
  roles: true
});
let roles = await listRoles();
roles = roles.map((role) => {
  return {
    label: role.name,
    value: role.name
  };
});
const submit = async (data, form) => {
  if (await m("updateUserRole", {
    user_id: obj.value.user_id,
    roles: data.roles
  })) {
    quasar.notify({
      message: "Role updated",
      color: "positive",
      icon: "check",
      position: "top-right"
    });
    router.back();
  }
};
</script>

<template>
    <l-page>
        <FormKit type="l-form" @submit="submit" :value="{ roles: obj.roles }">
            <FormKit type="l-option-group" :options="roles" name="roles">
            </FormKit>
        </FormKit>

    </l-page>
</template>
